<template>
    <div class="info">
        <van-nav-bar title="账户信息" left-arrow @click-left="onClickLeft" />
        <div class="avatar-item">
            <div>头像</div>
            <div class="avatar">
                <img :src="user[0].avatar" alt="">
            </div>
        </div>
        <div class="avatar-txt">
            <div>用户名</div>
            <div>{{ user[0].username }}</div>
        </div>
        <div class="address-item" @click="goPage('Address')">
            <div>收货地址</div>
            <div>
                <van-icon name="arrow" />
            </div>
        </div>
        <h2 class="binding">账号绑定</h2>
        <div class="address-item" @click="showPopup">
            <div>
                <van-icon name="graphic" color="#3190e8" />
                手机
            </div>
            <div>
                <van-icon name="arrow" />
            </div>
            <van-popup v-model:show="show" :style="{ padding: '64px' }">
                <span class="text">前往app设置</span> (点击面板关闭)</van-popup>
        </div>
        <div class="info-btn">
            <van-button color="#f00" block>退出登录</van-button>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'

import {useRouter} from 'vue-router'

export default defineComponent({
    name:'Info',
    setup () {
        // 用户信息
        let user:any = ref<Array<any>>([
            {
                username:'cidada',
                user_id:76942,
                id:76942,
                registr:'2023-05-09 18:46',
                mobile: "",
                is_mobile_valid: true,
                is_email_valid: false,
                is_active: 1,
                gift_amount: 3,
                avatar: "https://elm.cangdu.org/img/default.jpg",
            }
        ])
        
        // 返回上一页
        const onClickLeft = () => history.back();

        const show = ref(false);
        const showPopup = () => {
            show.value = !show.value;
        }

        
        let router: any = useRouter();
        //跳转页面
        let goPage: (name: string) => void = (name:  string): void => {
            router.push({name});
        }

        return {
            user,
            show,

            onClickLeft,
            showPopup,
            goPage,
        }
    }
})
</script>

<style lang="scss" scoped>

.info-btn{
    margin-top: 20px;
    padding: 10px 40px;
    box-sizing: border-box;
}
.binding{
    width: calc(100% - 40px );
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    padding: 10px 20px;
    color: #999;
    background-color: #eee;
}
.address-item{
    width: calc(100% - 10px - 40px);
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    text-align: center;
    margin: 5px;
    background-color: #fff;
    box-shadow: 0px 0px 4px 3px #ddd;
    .text{
        display: block;
        color: #3190e8;
    }
}

.avatar-item,
.avatar-txt{
    width: calc(100% - 10px - 40px);
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin: 5px;
    background-color: #fff;
    box-shadow: 0px 0px 4px 3px #ddd;
    .avatar {
      width: 59px;
      height: 59px;
      margin-left: 10px;
      border-radius: 59px;
      img {
        width: 100%;
        border-radius: 59px;
      }
    }
}


::v-deep .van-nav-bar__content {
    background-color: #3190e8;
}

::v-deep .van-nav-bar__title {
    color: #ffffff;
    font-size: 20px;
}

::v-deep .van-nav-bar .van-icon {
    color: #ffffff;
    font-size: 22px;
}

::v-deep .van-hairline--bottom::after {
    border-bottom-width: 0;
}

</style>